<template>
	<view class="container">
		<map id="test_map" ref="map1" style="width: 100%; height: 50%;display: flex;align-items: right;z-index: 1;"
			:show-location="true" :longitude="longitude" :latitude="latitude" :markers="markers" show-compass="true"
			scale="20" @tap="tapMap">
			<cover-image class="cover-view" style="position: absolute;right: 20px;bottom: 20px;" src="../../static/myLocation.png" @click="getCurrentPosition"></cover-image>
		</map>
		<view style="overflow-y: auto;">
			<view class="search-container">
				<input v-model="searchQuery" placeholder="输入地址搜索" class="search-input" />
				<fui-icon name="search" style="font-size: 27px;padding: 2px;" @tap="search"></fui-icon>
			</view>
				<view :class="{ darkBackground: showForm }">
					<view v-if="this.showForm === true" class="newPointForm">
						<view class="nfc-title">新建点位</view>
						<view class="nfcBody">
							<view class="nfc-name1">
								<view style="width: 30%;">名称: </view>
								<input placeholder="请填写点位名称" class="nameInput" v-model="pointName" />
							</view>
							<view class="selectNFC">
								<picker @change="nfcConfirm" :value="mapNfcMsg" :range="nfcList" range-key="nfcName" class="select">
									<view class="confirm">
										<view style="margin-left: 5px;width: 100%;">{{ this.selectedNfcName }}</view>
										<fui-icon name="arrowdown" style="justify-self: flex-end;"></fui-icon>
									</view>
								</picker>
								<view style="display: flex;margin-top: 10px;margin-left: 5px;">
									<view style="color: gray;" @tap="creatNfc">没有需要的nfc？录入</view>
									<uni-icons type="checkmarkempty" v-if="this.hasNFC" style="transform: translateY(3px);"></uni-icons>
									<view v-else style="color: gray;transform: translateY(3px);">-></view>
								</view>
							</view>
							<view style="display: flex;">
								<button class="toNFC" type="primary" @tap="createPoint">新建</button>
								<button class="toNFC" type="primary" @tap="exit">取消</button>
							</view>
						</view>
					</view>
				</view>
		</view>
	</view>
</template>

<script>
import request from '../../common/request';
	export default {
		data() {
			return {
				latitude: 0, // 纬度
				longitude: 0, // 经度
				markers: [], // 地图标记点
				searchQuery: '', // 搜索的地址
				pointName: '', // 点位名称
				tempPoint: null, // 临时保存的点位信息
				settingPoint: false, // 控制是否在设置点位模式中
				screenHeight: 700,
				screenWidth: 200,
				showForm: false, //是否显示新建点位表格信息
				hasNFC:false,
				mapNfcMsg:null, // nfc信息
				nfcList:[],
				selectedNfcName:"选择nfc",
				isShow: true,
				mapId:-1,
			};
		},
		onLoad(option) {
			this.mapId = option.mapId
		},
		onShow() {
			this.getNfcList()
			this.screenHeight = uni.getWindowInfo().screenHeight
			this.screenWidth = uni .getWindowInfo().screenWidth
			
			setTimeout(()=>{
				this.openPointInput()
			},1000)
			this.getRouteInfo()
			this.isShow = true
		},
		onReady() {
			this.getCurrentLocation();
			
		},
		methods: {
			getNfcList(){
				request('/NFC').then(res => {
					console.log(res)
					this.nfcList = res.data.data
					console.log("获取nfc列表")
					console.log(this.nfcList)
				})
			},
			getCurrentLocation() {
				// 获取当前位置信息
				uni.getLocation({
					type: 'gcj02', // 使用国测局坐标系
					success: (res) => {
						this.latitude = res.latitude;
						this.longitude = res.longitude;
						this.markers = [{
							id: 1,
							latitude: res.latitude,
							longitude: res.longitude,
							iconPath: '/static/locationpng.png', // 自定义标记图标
							width: 10,
							height: 10,
							label: {
								content: '当前位置',
								color: '#000',
								fontSize: 14,
								anchorX: -10,
								anchorY: -40,
							}
						}];
					},
					fail: (err) => {
						console.error('获取位置失败', err);
						uni.showToast({
							title: '获取位置失败',
							icon: 'none',
						});
					},
				});
			},
			search() {
				// 使用高德地图 API 进行地址搜索
				const key = '6a04c572238b1dc23aa7544e0aaa0d54'; // 高德地图API密钥
				uni.request({
					url: `https://restapi.amap.com/v3/geocode/geo?address=${this.searchQuery}&key=${key}`,
					success: (res) => {
						console.log('API响应:', res.data); // 打印API的完整响应数据
						if (res.data.geocodes && res.data.geocodes.length > 0) {
							const location = res.data.geocodes[0].location.split(',');
							this.longitude = parseFloat(location[0]);
							this.latitude = parseFloat(location[1]);
							this.markers = [{
								id: new Date().getTime(),
								latitude: this.latitude,
								longitude: this.longitude,
								iconPath: '/static/locationpng.png',
								width: 15,
								height: 15,
							}, ];
						} else {
							uni.showToast({
								title: '未找到该地址',
								icon: 'none',
							});
						}
					},
					fail: (err) => {
						console.error('搜索地址失败', err);
						uni.showToast({
							title: '搜索失败',
							icon: 'none',
						});
					},
				});
			},
			openPointInput() {
				uni.showToast({
					title:"请在地图上点击以添加点位",
					icon:'none'
				})
				this.settingPoint = true;
			},
			tapMap(event) {
				const mark = this.markers[0]
				if (this.settingPoint) {
					const {
						latitude,
						longitude
					} = event.detail;
					this.latitude = latitude;
					this.longitude = longitude;

					// 添加临时标记
					this.tempPoint = {
						id: new Date().getTime(),
						latitude: this.latitude,
						longitude: this.longitude,
						iconPath: '/static/locationpng.png',
						width: 15,
						height: 15,
					};
					this.markers = []
					this.markers.push(mark)
					this.markers.push(this.tempPoint);
					this.showForm = true
				}
			},
			doDelete() {
				this.markers = [];
			},
			getCurrentPosition() {
				this.getCurrentLocation();
			},
			exit(){
				this.showForm = false
			},
			createPoint(){
				this.hasNFC = true
				if(this.pointName === ""){
					uni.showToast({
						title:"点位名称不能为空",
						icon: 'none'
					})
				}else{
					if(this.hasNFC === false){
						uni.showToast({
							title:"NFC未录入",
							icon: 'none',
						})
					}else{
						request('/inspection/map/mapDetail' , 'POST' , {
							"mapDetailDesc": this.pointName,
							"mapId": 1,
							"mapLatitude": this.latitude,
							"mapLongitude": this.longitude,
							"unitId": 2,
							"mapNfcMsg": 123
						}).then(res => {
							console.log("新建点位接口,总地图")
							console.log(res)
						})
						request('/inspection/map/mapDetail' , 'POST' , {
							"mapDetailDesc": this.pointName,
							"mapId": this.mapId,
							"mapLatitude": this.latitude,
							"mapLongitude": this.longitude,
							"unitId": 2,
							"mapNfcMsg": 123
						}).then(res => {
							console.log("新建点位接口，当前地图")
							console.log(res)
							console.log(this.mapId)
							//新建成功后清除数据
							if(res.data.message === "SUCCESS"){
								this.pointName = ""
								this.hasNFC = false
								this.selectedNfcName = "请选择"
								this.getCurrentLocation()
								this.showForm = false
								this.getRouteInfo()
							}
						})
						
						
					}
				}
			},
			nfcConfirm(e){
				const index = e.detail.value;
				this.mapNfcMsg = this.nfcList[index].nfcMsg;
				this.selectedNfcName = this.nfcList[index].nfcName;
				this.hasNFC = true
			},
			creatNfc(){
				uni.navigateTo({
					url:`/pages/nfc/nfc?isShow=${true}`
				})
			},
			getRouteInfo() {
				//获取路线详情
				request(`/inspection/map/${this.mapId}`, 'GET').then(res => {
					console.log("获取所有点位信息")
					console.log(res)
					this.markers = res.data.data.map(item => ({
						id: item.mapDetailId,
						latitude: item.mapLatitude, 
						longitude: item.mapLongitude,
						iconPath: '/static/locationpng.png',
						width: 20, // 设置标记宽度
						height: 20, // 设置标记高度
						label: {
							content: item.mapDetailDesc, 
							color: '#000',
							fontSize: 14,
							anchorX: -10,
							anchorY: -40,
						}
					}))
					console.log("打印地图点位")
					console.log(this.markers)
					this.latitude = this.markers[0].latitude
					this.longitude = this.markers[0].longitude
					console.log(this.latitude+"  "+this.longitude)
				})
			}

		},
	};
</script>

<style scoped>
	.container {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.search-container {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		padding: 10px;
		background-color: #f8f9fa;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	.search-input {
		flex: 1;
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 8px;
		font-size: 16px;
		margin-right: 10px;
		transition: box-shadow 0.3s ease;
	}

	.search-input:focus {
		box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
		border-color: #007bff;
	}

	.search-button {
		padding: 10px 20px;
		background-color: #007bff;
		color: white;
		border: none;
		border-radius: 8px;
		font-size: 16px;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}

	.search-button:hover {
		background-color: #0056b3;
	}

	.action-button {
		padding: 10px 20px;
		background-color: #6c757d;
		color: white;
		border: none;
		border-radius: 8px;
		margin: 5px;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}

	.action-button:disabled {
		background-color: #c6c8ca;
		cursor: not-allowed;
	}

	.action-button:hover {
		background-color: #5a6268;
	}

	.cover-view {
		width: 35px;
		height: 35px;
		border-radius: 25px;
		background-color: rgba(255, 255, 255, 0.5);
		
	}

	.movable-area {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 240px;
		background-color: transparent;
	}
	.movable-view{
		width: 100%;
		background-color: transparent;
	}
	.newPointForm {
		width: 80%;
		height: 40%;
		background-color: #fff;
		position: fixed;
		left: 10%;
		top: 55%;
		z-index: 3;
		display: flex;
		flex-direction: column;
	}
	
	.nfc-title {
		font-size: 30px;
		text-align: center;
		padding: 15px;
	}
	
	.nfcBody {
		padding: 15px;
	}
	
	.nfc-name1 {
		display: flex;
		font-size: 20px;
		
	}
	
	.nameInput {
		align-self: center;
		background-color: #f5f5f5;
		font-size: 20px;
		margin-left: 5px;
	}
	
	.toNFC {
		margin-top: 10px;
		height: 35px;
		text-align: center;
		font-size: 15px;
		width: 40%;
	}
	.darkBackground {
		background-color: rgba(0, 0, 0, 0.5);
		/* 设置暗色背景 */
		position: fixed;
		/* 使背景覆盖整个视口 */
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
		/* 确保在其他元素之上 */
	}
	.select {
		width: 50%;
		margin-left: 10px;
		height: 28px;
	}
	.confirm {
		background-color: #f5f5f5;
		width: 100%;
		height: 28px;
		display: flex;
		justify-content: left;
		font-size: 15px;
		align-items: center;
	}
</style>